<script setup lang="ts">
import type { TableInstanceColumns } from '@/components/ProTable/type'
import { ClassInfoApi } from '@/apis'
import CellClassroom from '@/components/ProCell/CellClassroom.vue'
import { useForm, useTable } from '@/hooks'
import { useUserStore } from '@/stores'
import LessonFormModal from '@/views/education/lesson/LessonFormModal.vue'
import LessonSignInModal from '@/views/education/lesson/LessonSignInModal.vue'
import ClassLessonReScheduleModal from './ClassLessonReScheduleModal.vue'
import ClassStatus from './ClassStatus.vue'

const userStore = useUserStore()
const route = useRoute()

const { form, resetForm } = useForm<ClassInfoApi.ClassLessonQuery>({
  classId: route.query.id as string,
  lessonStatus: undefined,
})

const {
  tableData,
  loading,
  search,
} = useTable(() => ClassInfoApi.getClassLessonList(form))

const columns: TableInstanceColumns[] = [
  {
    title: '序号',
    width: 66,
    align: 'center',
    fixed: 'left',
    dataIndex: 'lessonIndex',
  },
  { title: '课次标题', dataIndex: 'title', slotName: 'title', width: 140 },
  { title: '上课时间', dataIndex: 'lessonDate', slotName: 'lessonDate', width: 280 },
  { title: '主讲老师', dataIndex: 'leadTeacherName' },
  { title: '校区/教室', dataIndex: 'classroomName', slotName: 'classroom' },
  { title: '状态', dataIndex: 'lessonStatus', slotName: 'lessonStatus' },
  {
    title: '操作',
    slotName: 'action',
    width: 160,
    align: 'center',
    fixed: 'right',
    show: userStore.hasPermission(['education:schedule:write']),
  },
]

// 编辑
const LessonFormModalRef = ref<InstanceType<typeof LessonFormModalRef>>()
const onEdit = (row) => {
  LessonFormModalRef.value?.open({...row})
}

// 点名
const LessonSignInModalRef = ref<InstanceType<typeof LessonSignInModal>>()
const onSignIn = (row) => {
  LessonSignInModalRef.value?.open(row.id)
}

// 重新排课
const ClassLessonReScheduleModalRef = ref<InstanceType<typeof ClassLessonReScheduleModal>>()
const reSchedule = () => {
  ClassLessonReScheduleModalRef.value?.open(route.query.id as string)
}

const refresh = () => {
  resetForm()
  search()
}
</script>

<template>
  <ProTable
    :data="tableData"
    :columns="columns"
    :loading="loading"
    :pagination="false"
    @refresh="refresh"
  >
    <template #toolbar-left>
      <a-space>
        <DictSelect v-model="form.lessonStatus" type="checkbox" code="LessonStatusEnum" @change="search" />
      </a-space>
    </template>
    <template #toolbar-right>
      <a-button v-permission="['edu:class:write']" type="primary" @click="reSchedule">
        <template #icon>
          <icon-redo />
        </template>
        重新排课
      </a-button>
    </template>
    <template #title="{ record }">
      {{ record.title || '-' }}
    </template>
    <template #lessonDate="{ record }">
      {{ record.lessonDate }} {{ record.startTime }} - {{ record.endTime }} {{ record.weekName }}
    </template>
    <template #lessonStatus="{ record }">
        <ClassStatus :status="record.lessonStatus || 1" code="LessonStatusEnum" />
        <div class="text-13px text-gray-4">
          {{ record.signInCount }} / {{ record.totalCount }}
        </div>
    </template>
    <template #classroom="{ record }">
      <CellClassroom :campus-name="record.campusName" :classroom-name="record.classroomName" />
    </template>
    <template #action="{ record }">
      <a-space>
        <a-link v-permission="['edu:class:write']" @click="onEdit(record)">
          编辑
        </a-link>
        <a-link v-permission="['edu:class:signIn']" @click="onSignIn(record)">
          点名
        </a-link>
      </a-space>
    </template>
  </ProTable>
  <LessonSignInModal ref="LessonSignInModalRef" />
  <LessonFormModal ref="LessonFormModalRef" @change="search" />
  <ClassLessonReScheduleModal ref="ClassLessonReScheduleModalRef" @change="search" />
</template>

<style lang="less" scoped></style>
